<template>
<div class="hello">
    <el-card shadow="hover">
        <el-form :inline="true" :model="searchStudent">
            <el-form-item label="姓名：" >
                <el-input v-model="searchStudent.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="年龄：">
                <el-input  type="number" v-model="searchStudent.age" placeholder="请输入年龄"></el-input>
            </el-form-item>
            <el-form-item label="班级：">
                <el-select v-model="searchStudent.scalss" placeholder="请选择班级">
                    <el-option
                      v-for="item in classList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.name">
                    </el-option>
                  </el-select>
            </el-form-item>
             <el-form-item >
                <el-button type="primary" plain @click="search">查询</el-button>
             </el-form-item>
             <el-form-item >
               <el-button type="primary" @click="addDialog = true">添加学生</el-button>
             </el-form-item>
             <el-dialog
                :close-on-click-modal="true"
                title="添加学生"
                :visible.sync="addDialog"
                width="30%"
                :before-close="handleClose">
                <el-form :model="addStudent">
                    <el-form-item label="姓名：" >
                        <el-input v-model="addStudent.name" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄：">
                        <el-input v-model="addStudent.age" placeholder="请输入年龄"></el-input>
                    </el-form-item>  
                    <el-form-item label="电话：">
                        <el-input v-model="addStudent.phone"  maxlength="11" type="number" placeholder="请输入电话"></el-input>
                    </el-form-item>
                    <el-form-item label="班级：">
                        <el-select v-model="addStudent.sclass" placeholder="请选择班级">
                            <el-option
                              v-for="item in classList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.name">
                            </el-option>
                          </el-select>
                    </el-form-item> 
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialog = false">取 消</el-button>
                    <el-button type="primary" @click="addStudentFun">确 定</el-button>
                  </span>
            </el-dialog>
        </el-form>
        <el-table
            :data="studentList"
            style="width: 100%">
          <el-table-column
              label="姓名"
              align="center"
              prop="name">
          </el-table-column>
          <el-table-column
              label="年龄"
              align="center"
              prop="age">
          </el-table-column>
          <el-table-column
              label="电话"
              align="center"
              prop="phone">
          </el-table-column>
          <el-table-column
              label="所在班级"
              align="center"
              prop="sclass">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </el-card>
</div>
</template>

<script>
import studentApi from '../api/StudentApi';
export default {
    name: 'student',
  props: {
    msg: String
  },
  data(){
    return{
      studentList: [],
      classList:[],
      page:1,
      pageSize:5,
      total:100,
      searchStudent:{},
      addDialog:false,
      addStudent:{}
    }
  },
  async created(){
   this.loadList()
   let {data} = await  studentApi.selectAllClass();
   this.classList = data;
   
  },
  methods: {
    async search(){
        console.log("search");      
        let {data} = await studentApi.selectByCondition(this.page,this.pageSize,this.searchStudent)
        this.total=data.total;
        this.studentList = data.rows;
        console.log(data);       
    },
    async addStudentFun(){
        // 判断是否为空对象
        if(  Object.keys(this.addStudent).length === 0 && this.addStudent.constructor === Object){
            this.$message.warning("请输入信息！");
            return;
        }
        console.log(this.addStudent);
        
        let {data} = await studentApi.addStudent(this.addStudent);
  
        if(data.code == 200){
            this.$message.success("添加成功！");
            this.addStudent = {};
        }else{
            this.$message.error("添加失败！")
        }
        
        this.loadList();
        this.addDialog = false;
    },
    // 每页大小改变时事件
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadList();
    },
    // 当前页改变时事件
    handleCurrentChange(val) {
      this.page = val;
      this.loadList();
    },
    async loadList(){
        let {data} = await studentApi.selectByPage({page:this.page,pageSize:this.pageSize})
        this.studentList = data.rows;
        this.total = data.total;
        console.log(data);
        
    },
    handleClose(){
        this.addDialog = false;
    },
    openMessage(){

    },
  }
}
</script>

<style>
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>